<template>
	<view class="" style="background-color: #d70127;">
		<view class="content">
			<view class="" style="display: flex;justify-content: center;margin-top: 85rpx;">
				<image src="/static/image/apply_text.png" mode="widthFix"></image>
			</view>
			<view class="box">
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 登录账号 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入字母+手机尾号4-6位" style="	font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="info.userName" />
					</view>
				</view>
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 登录密码 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入登录密码" style="	font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="info.password" />
					</view>
				</view>
				<!-- <view class="" style="color: red;text-align: right;font-size: 32rpx;margin-top: 20rpx;"> 密码为原用户密码 </view> -->
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 商家名/公司名 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入商家名/公司名" style="font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="info.name" />
					</view>
				</view>
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style="">手机号 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入手机号" style="font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="info.phone" />
					</view>
				</view>
				<view class="" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 店铺照片 </view>
					<view class="" style="display: flex;justify-content: center;">
						<image src="/static/image/imgUp.png" mode="" v-if="!info.image"
							style="width: 150rpx;height: 150rpx;" @click="upImg"></image>
						<image :src="info.image" mode="" style="width: 150rpx;height: 150rpx;" @click="upImg" v-else>
						</image>
					</view>
				</view>
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 经营行业 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入经营行业" style="font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="info.category" />
					</view>
				</view>
				<view class="" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 店铺地址 </view>
					<view class="" style="border: 1px solid #FDE8CE;color: #FDE8CE;">
						<textarea v-model="info.address" placeholder="请输入店铺地址" style="padding: 20rpx;"></textarea>
					</view>
				</view>
				<button class="loginBtn" @click="applyAddMethod"> 提交申请 </button>
				<button class="loginBtn" @click="$navTo('/pages/applyList')"> 查看审核列表 </button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		applyAdd
	} from '../request/api.js'
	export default {
		data() {
			return {
				info: {
					userId: uni.getStorageSync('userInfo').id,
					userName: '',
					name: '',
					image: '',
					address: '',
					category: '',
					password: '',
					phone: ''
				},
			}
		},
		onLoad(opt) {},
		onShow() {},
		methods: {
			//申请
			applyAddMethod() {
				let that = this;
				if (!this.info.userName) {
					uni.showToast({
						title: "请输入登录账号",
						icon: "none",
						duration: 1000,
					})
					return;
				}
				if (!this.info.password) {
					uni.showToast({
						title: "请输入登录密码",
						icon: "none",
						duration: 1000,
					})
					return;
				}
				if (!that.info.name) {
					uni.showToast({
						title: "请输入店铺名",
						icon: "none",
						duration: 1000,
					})
					return;
				}
				if (!that.info.image) {
					uni.showToast({
						title: "请上传图片",
						icon: "none",
						duration: 1000,
					})
					return;
				}
				if (!that.info.address) {
					uni.showToast({
						title: "请输入店铺地址",
						icon: "none",
						duration: 1000,
					})
					return;
				}
				applyAdd(that.info).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1000,
						})
						that.info = {
							userId: uni.getStorageSync('userInfo').id,
							userName: '',
							name: '',
							image: '',
							address: ''
						}
						setTimeout(() => {
							that.$navTo('/pages/applyList')
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 选择图片
			upImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.uploadImage(res.tempFilePaths[0])
					}
				})
			},
			//上传图片
			uploadImage(url) {
				uni.uploadFile({
					url: 'https://api.wdjlm.cn/jeecg-boot/sys/common/upload',
					// url: 'http://192.168.1.250:8080/jeecg-boot/sys/common/upload',
					filePath: url,
					name: 'file',
					header: {
						'X-Access-Token': uni.getStorageSync('token')
					},
					success: (res) => {
						const result = JSON.parse(res.data).message
						this.info.image = result
					},
					fail: (res) => {
						uni.showToast({
							title: '上传失败',
							icon: "none",
							duration: 1000,
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.content {
		min-height: 100vh;
		background: url('/static/image/bg2.png') no-repeat center center;
		background-size: 100% 100%;
		padding: 0 30rpx;
		padding-bottom: 200rpx;
		overflow: hidden;

		.backIcon {
			margin-top: 50rpx;
		}

		.topOne {
			justify-content: center;
			display: flex;
			margin-bottom: 45rpx;

			.indexText {
				width: 500rpx;
				height: 170rpx;
				padding-top: 80rpx;
			}
		}

		.topTwo {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			// margin-bottom: 60rpx;
			.line {
				width: 690rpx;
				height: 1px;
				border-top: 1rpx solid;
				border-image: linear-gradient(270deg, rgba(252, 238, 220, 0), rgba(255, 250, 243, 1), rgba(252, 238, 220, 0)) 1 1;
			}

			.text2 {
				width: 480rpx;
				height: 31rpx;
				font-size: 32rpx;
				color: #FDE8CE;
				line-height: 31rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
				margin: 13rpx 0;
			}
		}

		.box {
			width: 100%;
			// min-height: 552rpx;
			// background: #1C1A1F;
			padding: 0 50rpx;
			padding-bottom: 50rpx;
			overflow: hidden;
		}
	}

	.phoneText {
		font-size: 32rpx;
		color: #FDE8CE;
		font-weight: 600;
		height: 50rpx;
	}

	.ipt {
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 40rpx;
		border-bottom: 1px solid #FDE8CE;
		width: 350rpx;
	}

	.loginBtn {
		width: 256rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(#BA986B 0%, #F1DBB6 100%);
		border-radius: 37rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #2B1D14;
		text-align: center;
		margin-top: 70rpx;
	}

	.register {
		text-align: right;
		color: #FDE8CE;
		margin-top: 40rpx;
		font-size: 32rpx;
	}

	.placeholderStyle {
		color: #FDE8CE
	}
</style>